<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        #d{
            text-align: center;
            height: 300px;
            width: 300px;
            margin-top: 50px;
            padding-top: 50px;
           background: -webkit-linear-gradient(lightpink,lightskyblue);//谷歌
            height: 200px;width: 300px;
            border-radius: 5%;
            box-shadow:5px 1px 1px gray;
           }
        #d input{
            margin-top: 10px;
            }
    </style>
</head>
<body >

<div align="center">
    <form  id="form1" method="get" action="login.html">
        <div id="d">
       姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input  type="text" name="name" placeholder="请输入姓名" onblur="checkUsername()"><br>
       手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：<input  type="tel" name="tel" placeholder="请输入您的手机号码" onblur="checkTel()"><br>
       身&nbsp;份&nbsp;证&nbsp;：<input  type="password" name="card" placeholder="请输入身份证号" onblur="checkCard()"><br>
       密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input  type="password" name="pwd" placeholder="请输入密码" ><br>
       确认密码: <input  type="password" name="pwd1" placeholder="请再次输入密码"><br>
            <input type="button" id="inBtnSub" value="注册" onclick="checkPwd()">
            <input  type="reset" name="reset" value="重置" ><br>
     </div>
    </form>
</div>

<script>
    //判断用户名
    function checkUsername()
    {var user = document.getElementsByName("name")[0].value;
        if(user.length==0||user.length>10)
        {
            alert("请输入正确的帐号");
        }
    }

    //验证手机号
    function checkTel()
    {var user2 = document.getElementsByName("tel")[0].value;
        if(user2.length==0||user2.length<11||user2.length>11)
        {
            alert("请输入正确的手机号");
        }
    }

    //验证身份证
    function checkCard()
    {
        var user3 = document.getElementsByName("card")[0].value;
        if(user3.length==0||user3.length<18||user3.length>19)
        {
            alert("请输入正确的身份证号");
            return ;
        }
    }

    //验证密码
    function checkPwd(){
     if(document.getElementsByName("pwd")[0].value!=document.getElementsByName("pwd1")[0].value)
    {
        alert("两次输入密码不同");
        return;}
   document.getElementById("form1").submit();
}
</script>
</body>
</html>